<template>
	<div id="api-manager">
		<!--Show api list-->
		<el-row v-if="!currentOption">
			<ApiList v-on:triggerAddApi="addApi" v-on:triggerEditApi="editApi"></ApiList>
		</el-row>
		<!--Create api form-->
		<el-row v-if="currentOption==='addApi'">
			<NewApi
				v-on:triggerSubmitNewApi="submitNewApi"
				v-on:triggerReset="resetComponentData"
			></NewApi>
		</el-row>
		<!--Edit api form-->
		<el-row v-if="currentOption==='editApi'">
			<EditApi
				v-bind:api="editingApi"
				v-on:triggerSubmitEditApi="submitEditedApi"
				v-on:triggerReset="resetComponentData"
			></EditApi>
		</el-row>
	</div>
</template>

<script>
	import ApiList from './ApiList';
	import NewApi from './NewApi';
	import EditApi from './EditApi';
	export default {
		components:{
			ApiList,NewApi,EditApi
		},
		name: 'api-manager',
		created(){
			this.requestApiList();
		},
		computed:{
			apiList:function(){
				return this.$store.getters.apiList;
			},
		},
		methods:{
			// Requests
			requestApiList(){
				this.$store.dispatch({
					type:'fetch',
					name:'getApiList',
					method:'post'
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						this.$store.commit({
							type:'setApiList',
							apiList:res
						});
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
			// Adding new api
			addApi(){
				this.currentOption = "addApi";
			},
			submitNewApi(form){
				if(this.checkForm(form)){
					//Submit api
					const request = {
						uri: form.uri,
						description: form.description,
						requirements: form.requirements,
						needAuthorization: form.needAuthorization,
						isPublic: form.isPublic,
						isEnable: form.isEnable
					};
					this.$store.dispatch({
						type:'fetch',
						name:'createApi',
						data:{
							...request
						},
						method:'post'
					}).then(res=>{
						if(res.errCode){
							this.$message({
								message:res.errMsg,
								type: 'error'
							});
						}else{
							this.$message({
								message:'提交成功',
								type: 'success'
							});
							this.requestApiList();
							this.resetComponentData();
							this.flashServer();
						}
					}).catch(error=>{
						this.$message({
							message:error,
							type: 'error'
						});
						this.resetComponentData();
					});
				}
			},
			flashServer(){
				this.$store.dispatch({
					type:'fetch',
					name:'flashServer',
				})
			},
			// Editing api
			editApi(api){
				if(!api.requirements) api.requirements = [];
				this.editingApi = JSON.parse(JSON.stringify(api));
				this.currentOption = "editApi";
			},
			submitEditedApi(form){
				console.log(form);
				if(this.checkForm(form)){
					//Submit api
					let request;
					this.apiList.map(api=>{
						if(api.id === form.id){
							request = this.requestParser(api,form);
						}
					});
					this.$store.dispatch({
						type:'fetch',
						name:'updateApi',
						data:{...request},
						method:'post'
					}).then(res=>{
						if(res.errCode){
							this.$message({message:res.errMsg,type: 'error'});
						}else{
							this.$message({message:'提交成功',type: 'success'});
							this.flashServer();
							this.requestApiList();
							this.resetComponentData();
						}
					}).catch(error=>{
						this.$message({message:error,type: 'error'});
						this.resetComponentData();
					});
				}
			},
			//Utilities
			checkForm(form){
				if(!form.uri){
					this.$message({
						message:'接口地址不能为空',
						type: 'error'
					});
					return false;
				}
				if(!form.description){
					this.$message({
						message:'接口描述不能为空',
						type: 'error'
					});
					return false;
				}
				return true;
			},
			requestParser(original,edited){
				let data = {};
				data.id = original.id;
				if(original.uri!==edited.uri) data.uri = edited.uri;
				if(original.description!==edited.description) data.description = edited.description;
				if(original.requirements!==edited.requirements) data.requirements = edited.requirements;
				if(original.needAuthorization!==edited.needAuthorization) data.needAuthorization = edited.needAuthorization;
				if(original.isPublic!==edited.isPublic) data.isPublic = edited.isPublic;
				if(original.isEnable!==edited.isEnable) data.isEnable = edited.isEnable;
				return data;
			},
			resetComponentData(){
				this.editingApi = {
					uri:'',
					description:'',
					requirements:[],
					needAuthorization:false,
					isPublic:false,
					isEnable:false,
				};
				this.newApi = {
					uri:'',
					description:'',
					requirements:[],
					needAuthorization:true,
					isPublic:false,
					isEnable:true,
				};
				this.currentOption = undefined;
				this.requestApiList();
			}
		},
		data(){
			return {
				newApi:{
					uri:'',
					description:'',
					requirements:[],
					needAuthorization:true,
					isEnable:true,
				},
				activeTab:'api',
				editingApi:{
					uri:'',
					description:'',
					requirements:[],
					needAuthorization:false,
					isEnable:false,
				},
				currentOption:undefined,
				requirementsOptions: [
					{value: 'user_id',label: 'user_id'},
					{value: 'token',label: 'token'},
					{value: 'clientid',label: 'clientid'}
				],
			}
		}
	}
</script>

<style lang="scss">
	#api-manager{
		.button-container{
			margin-top: 15px;
			float: right;
		}
	}
</style>
